import 'package:flutter/material.dart';

class ListAndGrid extends StatelessWidget {
  const ListAndGrid({ super.key });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("List And Grid"), centerTitle: true),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 150.0,
              child: ListView(
                children: const [
                  ListTile(leading: Icon(Icons.map), title: Text("Map")),
                  ListTile(leading: Icon(Icons.photo_album), title: Text("Album")),
                  ListTile(leading: Icon(Icons.phone), title: Text("Phone")),
                ],
              ),
            ),

            Container(
              padding: const EdgeInsets.all(16.0),
              height: 150.0,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  Container(width: 200.0, color: Colors.deepPurple),
                  Container(width: 200.0, color: Colors.red),
                  Container(width: 200.0, color: Colors.green),
                  Container(width: 200.0, color: Colors.blue),
                  Container(width: 200.0, color: Colors.yellow),
                ],
              ),
            ),

            Container(
              height: 200.0,
              color: Colors.blueGrey,
              padding: const EdgeInsets.all(16.0),
              child: GridView.count(
                crossAxisCount: 2,
                children: List.generate(4, (index) {
                  return Center(
                    child: Text(
                      "Item $index",
                      style: const TextStyle(color: Colors.black, fontSize: 16.0),
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}